<template>
	<div class="warehouse-management">
		<div class="containercontent">
			<div class="penalrow selectw100 opabsolute">
				<!--<el-button type="primary" size="mini" @click="addEidt('new')" v-if="userOpernation.add.display">添加仓库</el-button>-->
			</div>
			<div class="separaterowTable" v-if="tableShow">
				<div class="tableTittle">
					<div><span class="fontImpact">1</span><span>仓库列表</span></div>
					<el-button type="primary" icon="el-icon-plus" style="float:right;" size="mini" @click="addEidt('new')" v-if="userOpernation.add.display">添加仓库</el-button>
				</div>

				<el-table :data="warehouseData" style="width: 100%" class="tableCon" size="mini" :cell-class-name="cellClassName">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="120px" show-overflow-tooltip>
					</el-table-column>
					<el-table-column property="createTime" label="创建时间" min-width="120px" :formatter="formatterDate">

					</el-table-column>
					<el-table-column property="status" label="状态" min-width="120px" :formatter="formatter">
					</el-table-column>
					<el-table-column label="操作" min-width="150px">
						<template slot-scope="scope">

							<el-button v-if="scope.row.status=='1' && userOpernation.disable.display" type="text" size="mini" @click="updateStatus(scope.row)">停用</el-button>
							<el-button v-if="scope.row.status=='0' && userOpernation.enable.display" type="text" size="mini" @click="updateStatus(scope.row)">启用</el-button>

							<el-button @click="addEidt('edit',scope.row)" type="text" size="mini" v-if="userOpernation.update.display && scope.row.status !='0'">编辑</el-button>
							<el-button type="text" size="mini" @click="deletWarehouse(scope.row)" v-if="userOpernation.delete.display">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--<div class="block changepages">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="qualityPlanTable.pageinfo.page" :page-sizes="[20, 50, 100, 500]" :page-size="qualityPlanTable.pageinfo.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="qualityPlanTable.pageinfo.rowNumber">
					</el-pagination>
				</div>-->
			</div>
		</div>
		<addEdit :showAddBottle.sync="showAddEdit" :title.sync="title" :wereData.sync="wereData"></addEdit>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import addEdit from './werehouseDialog/addEdit.vue'
	export default {
		name: "warehouse-management",
		components: {
			addEdit
		},
		data() {
			return {
				title: '',
				wereData: {
					name: "",
					submitType: ""
				},
				showAddEdit: false,
				warehouseData: [],
				tableShow: false
			}
		},
		props: ['userOpernation'],
		computed: {
			...mapState(['enableStatus'])
		},
		created() {
			this.readStockList()
		},
		methods: {
			cellClassName({row, column, rowIndex, columnIndex}){
				// console.log({row, column, rowIndex, columnIndex})
				 if (column.label =='状态' && row.status==0) {
					return 'danger-cell';
				} 
				return '';
				
			},
			formatter(row, column, cellValue) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })

			},
			formatterDate(row, column, cellValue, index) {
				return cellValue.slice(0, cellValue.indexOf("."));
			},
			//			1、(1)交互名称：获取仓库列表
			//		   (2)url:/system/readStockList.htm
			//		   (3)参数：
			//		   (4)返回数据: 
			readStockList() {
				this.$http({
					method: 'post',
					apiUrl: '/system/readStockList.htm',
					params: null,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						console.log(res)
						this.warehouseData = res.data
						this.tableShow = true
					} else { }
				}, )
			},
			//			改变状态
			//1、(1)交互名称：启用停用仓库
			// (2)url:/system/updateStockStatus.htm
			// (3)参数：
			//{
			//	"id":"",
			//	"status":""
			//}
			updateStatus(row) {
				var msg = row.status == 0 ? "启用" : "停用";
				this.$confirm("是否" + msg, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = { id: row.id, status: '' }
					if (row.status == 1) {
						params.status = 0
					} else {
						params.status = 1
					}
					this.$http({
						method: 'post',
						apiUrl: '/system/updateStockStatus.htm',
						params: params,
						isJson: true,
					}).then(res => {
						if (res.code === 0) {
							console.log(res)
							this.$message({
								showClose: true,
								message: '状态修改成功！',
								type: 'success'
							})
							this.readStockList()
						} else { }
					}, )
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消' + msg
					});
				});
			},
			//			添加编辑仓库
			addEidt(flag, row) {
				if (flag == 'new') {
					this.title = '添加仓库'
					this.wereData = {
						name: "",
						submitType: ""
					}
				} else if (flag == 'edit') {
					this.title = '编辑仓库'
					for(var i in row){
						this.wereData[i] = row[i]
					}
				}
				this.showAddEdit = true
			},

			//			删除仓库
			//1、(1)交互名称：删除仓库
			// (2)url:/system/deleteStock.htm
			// (3)参数：id
			deletWarehouse(row) {

				this.$confirm("是否删除", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						method: 'post',
						apiUrl: '/system/deleteStock.htm',
						params: { id: row.id },
						isJson: false,
					}).then(res => {
						if (res.code === 0) {
							this.$message({
								showClose: true,
								message: '删除成功！',
								type: 'success'
							})
							this.readStockList()
						} else { }

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除!'
						});
					});
				})
			}
		}
	}

</script>

<style scoped>
	.el-table .danger-cell {
		color: red;
	}

</style>